<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/index.css">
    <title>阿闷天气</title>
</head>
<body>
    <div id="app">
        <!-- 头部模块 -->
        <header>
            <h2>阿 闷 天 气</h2>    
        </header>
        <!-- 搜索栏模块 -->
        <div class="nav">
                <div class="search">
                    <input type="text" class="nav_hd" v-model="city" @keyup.enter="weather" @click="clear">
                    <button class="nav_bd" @click="weather" @mouseenter="mouseAdd" @mouseleave="mouse">搜索</button>
                </div>
            <div class="city">
                <a href="javascript:;" @click="cityList('北京')">北京</a>
                <a href="javascript:;" @click="cityList('上海')">上海</a>
                <a href="javascript:;" @click="cityList('广州')">广州</a>
                <a href="javascript:;" @click="cityList('潍坊')">潍坊</a> 
            </div>
        </div>
        <!-- 显示天气模块 -->
        <div class="show">
            <ul >
                <li v-for="item in cityWeather">
                    <h4>{{item.type}}</h4>
                    <p>{{item.low}}</p>
                    <p>{{item.high}}</p>
                    <h5>{{item.date}}</h5>
                </li>
            </ul>
        </div>
    </div>
    <!-- 引入vue开放环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入自己的js -->
    <script src="js/main.js"></script>
</body>
</html>